<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>留言板🔥</title>
  <style>
    @import url(https://fonts.googleapis.com/css?family=Roboto:400,600);

    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    body {
      font-family: "Roboto", sans-serif;
      height: 100%;
      margin-bottom: 50px;
      background: cadetblue;
    }

    .container {
      width: 85%;
      background: #fff;
      margin: 50px auto;
      border-radius: 5px;
      padding: 15px;
    }

    #close {
      background: #28256b;
      width: 100%;
      color: #fff;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 5px;
      border: none;
      transition: all 0.2s;
    }

    #close:hover {
      background: #1d1a4d;
    }

    .title {
      font-size: 27px;
      text-indent: 10px;
      display: flex;
      justify-content: space-between;
    }

    .comment-form {
      display: flex;
      flex-direction: column;
    }

    .comment-form input,
    .comment-form textarea {
      border-radius: 5px;
      background: #efefef;
      border: none;
      outline: none;
      padding: 10px;
      margin-bottom: 20px;
    }

    .comment-form :disabled {
      background: rgba(0, 0, 0, 0.351);
      cursor: not-allowed;
    }


    #submit {
      background: #298d9f;
      width: 67px;
      color: #fff;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 5px;
      border: none;
      transition: all 0.2s;
    }

    #submit:hover {
      background: #1e6875;
    }

    #comment-list li {
      padding: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    #comment-list li .top {
      display: flex;
      justify-content: space-between;
    }

    #comment-list li .top :first-child {
      font-weight: 600;
    }

    #comment-list li .top :last-child {
      font-size: 12px;
    }

    .content-box {
      display: flex;
      align-items: center;
    }

    .content {
      flex-grow: 1;
      margin: 10px 0;
      background: #eee;
      padding: 2rem 1rem;

    }

    .btn-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-left: 20px;

    }

    .btn-box img {
      width: 30px;
      cursor: pointer;
    }

    .content-box button {
      min-width: 80px;
      background: rgb(234, 102, 102);
      color: #fff;
      border: none;
      padding: 0.5rem;
      border-radius: 7px;
      cursor: pointer;
      margin-top: 10px;
    }

    .content-box button:hover {
      background: rgb(176, 80, 80);

    }
  </style>
</head>

<body>
  <div id="app" class="container">
    <button id="close" @click="isClosed = !isClosed">{{ isClosed ? '开启留言' :'关闭留言'}}</button>
    <!-- 表单区域 -->
    <div>
      <h2 class="title">留言板</h2>
      <div class="comment-form">
        <input v-model="name" :disabled="isClosed" id="name" type="text" placeholder="请输入您的姓名...">
        <textarea :disabled="isClosed" @keyup.enter="addComment" v-model="comment" id="comment" name=""
          placeholder="请输入您的留言..." cols="30" rows="3"></textarea>
        <button :disabled="isClosed" @click="addComment" id="submit">留言</button>
      </div>
    </div>

    <!-- 列表区域 -->
    <div>
      <h2 class="title">留言列表
        <input v-model="keyword" @input="filterHandler" type="text">
      </h2>
      <ul id="comment-list">
        <li v-for="(item, index) in filterList" :key="index">
          <div class="top"><span>{{item.name}}</span><span>{{item.date}}</span></div>
          <div class="content-box">
            <div class="content">{{item.content}}</div>
            <div class="btn-box">
              <div @click="item.isZan = !item.isZan">
                <img v-show="!item.isZan" src="./zan.png" alt="">
                <img v-show="item.isZan" src="./zan2.png" alt="">
              </div>
              <button @click="deleteHandler(index)">删除</button>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- 引入vue文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [],
        name: '',
        comment: '',
        isClosed: false,
        keyword: '',
        filterList: []
      },
      created() {
        this.getData()
      },
      methods: {
        addComment() {
          this.list.unshift({
            name: this.name,
            date: new Date().toLocaleDateString(),
            content: this.comment,
            isZan: false
          })
          this.name = ''
          this.comment = ''
          this.filterList = [...this.list]
        },
        deleteHandler(i) {
          this.list.splice(i, 1)
          this.filterList = [...this.list]
        },
        filterHandler() {
          this.filterList = this.list.filter(item => {
            return item.name.includes(this.keyword) || item.content.includes(this.keyword)
          })
        },
        getData() {
          // 通过发送请求拿到数据
          this.list = [{
            name: '张三',
            date: '2023/2/3',
            content: '哈哈哈1234',
            isZan: false
          },
          {
            name: '赵四',
            date: '2023/1/3',
            content: '嘿嘿嘿123',
            isZan: false
          },
          {
            name: '王五',
            date: '2023/2/3',
            content: '呵呵呵12',
            isZan: false
          },
          {
            name: '刘六',
            date: '2023/1/3',
            content: '嘻嘻嘻1',
            isZan: false
          },]
          // this.filterList = this.list
          // this.filterList = [...this.list]

        }
      }
    })
  </script>
</body>

</html>